<template>
  <div class="commentItem">
    <div class="avatar">
      <van-image
        width="36"
        height="36"
        lazy-load
        round
        :src="comment.userDetail.avatar_middle"
      />
    </div>
    <div class="right">
      <div class="top">
        <div class="nickname">{{ comment.userDetail.nickname }}</div>
        <div class="doLike">
          <svg
            v-if="!isLike"
            t="1677204147051"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3623"
            width="22"
            height="22"
          >
            <path
              d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
              fill="#999"
              p-id="3624"
            ></path>
          </svg>
          <svg
            v-else
            t="1677204147051"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3623"
            width="22"
            height="22"
          >
            <path
              d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
              fill="#ff0000"
              p-id="3624"
            ></path>
          </svg>
        </div>
      </div>
      <div class="contentBox">
        <span class="content">{{ comment.contentText }}</span>
        <span class="sub">
          {{
            String(comment.createTimeUnix).slice(0, 10) | timestampToTime
          }}&nbsp;·&nbsp;
          {{ comment.ipLocation }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["comment"],
  data() {
    return {
      isLike: false,
    };
  },
  filters: {
    timestampToTime: function (timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return "";
      } else {
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.commentItem {
  padding-top: 15px;
  display: flex;

  :deep(.van-image) {
    display: block !important;
  }

  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #f2f2f2;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .right {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;

      .nickname {
        font-size: 14px;
        color: #999;
      }

      .doLike {
      }
    }

    .contentBox {
      width: 200px;

      .content {
        font-size: 15px;
      }

      .sub {
        font-size: 13px;
        color: #999;
      }
    }
  }
}
</style>
